/* eslint-disable */
import echarts from "echarts/lib/echarts";
import Chart from "echarts-for-react/lib/core";

// 柱状图
export default function ChartBar({ xData = [], yLabel = '', data = [], data2 = [], data3 = [], title = '' }) {
  const option = {
    color: ["#00DEFF", "rgba(255, 203, 73, 1)", "#46CC92"],

    legend: {
      data: ['产生', '利用', '处置'],
      itemHeight:6,
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      top: 30,
      left: 10,
      right: 20,
      bottom: 10,
      containLabel: true
    },
    tooltip: { trigger: "axis" },
    xAxis: {
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: { show: false },
      axisLabel: { color: "#fff" },
      data: xData
    },
    yAxis: {
      name: yLabel,
      splitLine: { show: false },
      axisTick: { show: false },
      axisLine: { lineStyle: { color: "#fff" } },
      axisLabel: { color: "#fff" }
    },
    series: [
      {
        name: '产生',
        type: "bar",
        data,
        barWidth: 6,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(0,222,255,1)" },
              { offset: 1, color: "rgba(29,87,117,1)" }
            ]),
            barBorderRadius: [5, 5, 0, 0]
          }
        }
      },
      {
        name: '利用',
        type: "bar",
        data: data2,
        barWidth: 6,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "rgba(255, 203, 73, 1)" },
              { offset: 1, color: "rgba(29,87,117,1)" }
            ]),
            barBorderRadius: [5, 5, 0, 0]
          }
        }
      },
      {
        name: '处置',
        type: "bar",
        data: data3,
        barWidth: 6,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: "#4FC59F" },
              { offset: 1, color: "rgba(29,87,117,1)" }
            ]),
            barBorderRadius: [5, 5, 0, 0]
          }
        }
      },

    ]
  };

  return (
    <div className="situational-detail">
      <Chart
        echarts={echarts}
        option={option}
        notMerge
        lazyUpdate
        style={{ height: 200 }}
      />
    </div>
  );
}